<template>
    <el-menu @select="select" default-active="0" class="left-menu" >
        <el-menu-item v-for="i in length" :index="i-1+''" :key="i" :class="{'small-font':isSmall}"><slot :name="i-1+''"></slot></el-menu-item>
    </el-menu>
</template>

<script>/**
 * 封装左侧导航栏，具有{length}个slot，分别名为字符串'0','1'...,代表{length}个不同的选项，可以在这些slot中插入想要的内容。
 * @emits select(index) 当被点击时触发，index表示被点击的下标(注意type是字符串)
 * @props length 选项的数量
 */

import {detectZoom} from "~/utils/DpiUtils";

    export default {
        name: "LeftNavMenu",
        props:{
            length:Number
        },
        data(){
            return{
                isSmall:false,
            }
        },
        methods:{
            select(index){
                this.$emit('select',index);
            }
        },mounted() {
            const zoom = detectZoom();
            this.isSmall = zoom>180;
        }
    }
</script>

<style scoped>
    .left-menu{
        width: 12vw;
        height: 88vh;
    }
    .left-menu span{
        font-size: 1.5em;
    }

    .left-menu .is-active{
        background-color: #014FDE;
        color: white;
    }

    .small-font{
        font-size: 1em;
    }
</style>